<template>
  <div class="layer-panel">
    <el-card class="layer-card">
      <template #header>
        <div class="panel-header">
          <span>图层管理</span>
          <el-button size="small" @click="addNewLayer">
            <el-icon><Plus /></el-icon>
          </el-button>
        </div>
      </template>
      
      <div class="layer-list">
        <div 
          v-for="layer in layers" 
          :key="layer.id"
          class="layer-item"
          :class="{ active: selectedLayer?.id === layer.id }"
          @click="selectLayer(layer)"
        >
          <div class="layer-info">
            <el-checkbox 
              v-model="layer.visible"
              @change="toggleLayerVisibility(layer)"
            />
            <span class="layer-name">{{ layer.name }}</span>
            <span class="layer-count">({{ layer.shapes?.length || 0 }})</span>
          </div>
          
          <div class="layer-actions">
            <el-button 
              size="small" 
              type="text"
              @click.stop="editLayer(layer)"
            >
              <el-icon><Edit /></el-icon>
            </el-button>
            <el-button 
              size="small" 
              type="text"
              @click.stop="deleteLayer(layer)"
            >
              <el-icon><Delete /></el-icon>
            </el-button>
          </div>
        </div>
        
        <div v-if="layers.length === 0" class="empty-layers">
          <el-icon size="32" color="#909399"><FolderOpened /></el-icon>
          <p>暂无图层</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useMapStore } from '../../stores/map'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Plus, Edit, Delete, FolderOpened } from '@element-plus/icons-vue'

const mapStore = useMapStore()
const { layers, selectedLayer } = mapStore

// 选择图层
const selectLayer = (layer) => {
  mapStore.selectLayer(layer)
}

// 切换图层可见性
const toggleLayerVisibility = (layer) => {
  // 这里可以添加地图图层显示/隐藏逻辑
  console.log('切换图层可见性', layer)
}

// 添加新图层
const addNewLayer = () => {
  const newLayer = {
    id: `layer_${Date.now()}`,
    name: `图层 ${layers.length + 1}`,
    visible: true,
    shapes: []
  }
  mapStore.addLayer(newLayer)
  mapStore.selectLayer(newLayer)
}

// 编辑图层
const editLayer = (layer) => {
  // 这里可以添加图层编辑逻辑
  console.log('编辑图层', layer)
}

// 删除图层
const deleteLayer = (layer) => {
  ElMessageBox.confirm(
    `确定要删除图层 "${layer.name}" 吗？`,
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    mapStore.removeLayer(layer.id)
    if (selectedLayer.value?.id === layer.id) {
      mapStore.selectLayer(null)
    }
    ElMessage.success('图层已删除')
  }).catch(() => {
    // 取消删除
  })
}
</script>

<style scoped>
.layer-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
  width: 300px;
  max-height: 500px;
}

.layer-card {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.layer-list {
  max-height: 400px;
  overflow-y: auto;
}

.layer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.layer-item:hover {
  background-color: #f5f7fa;
}

.layer-item.active {
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
}

.layer-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.layer-name {
  font-size: 14px;
  color: #303133;
}

.layer-count {
  font-size: 12px;
  color: #909399;
}

.layer-actions {
  display: flex;
  gap: 4px;
}

.empty-layers {
  text-align: center;
  padding: 40px 20px;
  color: #909399;
}

.empty-layers p {
  margin-top: 8px;
  font-size: 14px;
}
</style> 